<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'
import moment from 'moment'

// 查询
const itemsPerPage = ref(10);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '地点', key: 'placeName', sortable: false},
    {title: '巡检次数', key: 'count', sortable: false},
    {title: '异常总数', key: 'abnormalTotal', sortable: false},
    {title: '已处理总数', key: 'alreayHandleTotal', sortable: false},
    {title: '未处理总数', key: 'untreatedTotal', sortable: false},
    {title: '处理中总数', key: 'beingHandle', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const dateSearch = ref(new Date());
const abnormalDialog = ref(false);
const abnormalList = ref({});

const search = ref(moment(new Date()).format('YYYY-MM-01'));
const name = ref(moment(new Date()).format('YYYY-MM-01'));
watch(name, () => {
    search.value = name.value
})

function loadItems() {
    loading.value = true;
    axios.post('/checkRecord/getMonthRecord', {
        date: name.value
    }).then(({data}) => {
        items.value = data.data;
        totalItems.value = data.data.length;
        loading.value = false;
    })
}

function downloadFile() {
    let obj = {
        date: name.value
    }
    axios({
        method: "POST",
        url: "/checkRecord/monthExport",
        responseType: 'blob',
        data: obj
    }).then(res => {
        console.log(res)
    }, err => {
        let blob = new Blob([err.data], {type: "application/vnd.ms-excel"});
        let fileName = `${moment(new Date(name.value)).format("YYYY-MM")}月报表.xls`
        if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
            document.body.removeChild(link); // 释放标签
        } else {
            // 其他浏览器
            navigator.msSaveBlob(blob, fileName);
        }
    })
}

onMounted(() => {
    loadItems();
});

// 增改
const isShowDialog = ref(false)

function changeDate() {
    name.value = moment(dateSearch.value).format('YYYY-MM-01')
    isShowDialog.value = false
}

function clickAbnormal(item) {
    abnormalDialog.value = true
    let obj = {
        date: name.value,
        checkPlace: item.checkPlace,
    }
    obj.eventType = 0
    axios.post("/checkRecord/abnomalList", obj).then(({data}) => {}, err => {
        abnormalList.value.untreatedTotal = err.data
    })
    obj.eventType = 1
    axios.post("/checkRecord/abnomalList", obj).then(({data}) => {}, err => {
        abnormalList.value.beingHandle = err.data
    })
    obj.eventType = 2
    axios.post("/checkRecord/abnomalList", obj).then(({data}) => {}, err => {
        abnormalList.value.alreayHandleTotal = err.data
    })
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>月报表</v-toolbar-title>
        <v-text-field v-model="name" readonly :clearable="true" hide-details placeholder="巡检时间" @click="isShowDialog = true"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <v-date-picker
            v-model="dateSearch"
            @update:model-value="changeDate"
            type="month"
            ></v-date-picker>
        </v-dialog>
        <v-btn icon="mdi-upload" @click="downloadFile"></v-btn>
    </v-toolbar>

    <v-dialog v-model="abnormalDialog" max-width="500px">
        <v-card>
            <v-card-title>待处理事件</v-card-title>
            <div style="margin-left: 20px" v-for="item in abnormalList.untreatedTotal">
                <div>时间：{{ item.recordTime }}</div>
                <div>地点：{{ item.checkPlaceName }}</div>
                <div>巡检员：{{ item.checkUserName }}</div>
                <div>微网格：{{ item.checkPlaceSmallName }}</div>
            </div>
            <v-card-title>未处理事件</v-card-title>
            <div style="margin-left: 20px" v-for="item in abnormalList.beingHandle">
                <div>时间：{{ item.recordTime }}</div>
                <div>地点：{{ item.checkPlaceName }}</div>
                <div>巡检员：{{ item.checkUserName }}</div>
                <div>微网格：{{ item.checkPlaceSmallName }}</div>
            </div>
            <v-card-title>已处理事件</v-card-title>
            <div style="margin-left: 20px" v-for="item in abnormalList.alreayHandleTotal">
                <div>时间：{{ item.recordTime }}</div>
                <div>地点：{{ item.checkPlaceName }}</div>
                <div>巡检员：{{ item.checkUserName }}</div>
                <div>微网格：{{ item.checkPlaceSmallName }}</div>
            </div>
        </v-card>
    </v-dialog>

  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="totalItems" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-file-find" variant="text" @click="clickAbnormal(item.raw)"></v-btn>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
